<template>
    <a-modal
        :bodyStyle="{maxHeight: maxHeight+'px', overflow: 'auto' }"
        :destroyOnClose="true"
        :title="title"
        :width="width"
        :visible="visible"
        :confirmLoading="confirmLoading"
        :maskClosable="maskClosable"
        @ok="ok"
        @cancel="cancel"
        cancelText="关闭"
        :ok-button-props="{ props: { shape:'round'} }"
        :cancel-button-props="{ props: { shape:'round'} }">
        
        <a-spin :spinning="confirmLoading">
            <center>
           <a-upload 
            :file-list="fileList" 
            :remove="handleRemove" 
            :before-upload="beforeUpload"
            accept=".xls,.xlsx">
            <div v-if="fileList.length < 1" >
                <a-button type="primary"> <a-icon type="upload" />文件选择</a-button>
            </div>
            </a-upload>
            
            <div style="margin-top:30px;" v-if="isShowTemplate">
                <a-button  @click="downloadTemplate"> <a-icon type="download" />模板下载</a-button>
            </div>
            </center>
        </a-spin>
    </a-modal>
</template>
<script>
import request from '@/utils/request'
export default {
    name:'LExcelUpload',
    props:{
        title:{
            type:String,
            default:'数据导入'
        },
        templateId:{
            type:String,
            required:true
        },
        templateName:{
            type:String,
            required:true
        },
        maxHeight:{
            type:Number,
            default:800
        },
        width:{
            type:Number,
            default:600
        },
        
        maskClosable:{
            type:Boolean,
            default:true
        },
        labelCol:{
            type:Object,
            default:function(){
                return {sm: { span: 4 }}
            }
        },
        wrapperCol:{
            type:Object,
            default:function(){
                return {sm: { span: 20 }}
            }
        },
        isShowTemplate:{
           type:Boolean,
            default:true 
        },
        imoprtParameter:{
            type:Object,
            default:()=>{}
        }
    },
    data() {
        return {
            visible:false,
            confirmLoading: false,
            fileList: [],
        }
    },
     watch:{
        visible () {
            if (this.visible) {
                this.fileList=[]
                
            }
        }
     },
    created(){
        
    },
    methods:{
        show(){
            this.visible=true;
        },
        handleRemove(file) {
            const index = this.fileList.indexOf(file);
            const newFileList = this.fileList.slice();
            newFileList.splice(index, 1);
            this.fileList = newFileList;
        },
        beforeUpload(file) {
            if(file.size>5242880){
               this.$message.warning("EXCEL文件不能超过5M");
               return false
            }
            //判断文件类型 application/vnd.ms-excel
            if(file.type!="application/vnd.ms-excel" && file.type!="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"){
               this.$message.warning("只能选择EXCEL文件");
               return false
            }
            this.fileList = [...this.fileList, file];
            return false;
        },
        downloadTemplate(){
            if(!this.templateId ){
                this.$message.error("请指定导入数据模板内码");
                return false
            }
            if(!this.templateName){
                this.$message.error("请指定导入数据模板名称");
                return false
            }
            this.confirmLoading = true;
            request({
                url: '/excel/ExportExcelControl/downloadTemplate',
                method: 'get',
                params:{templateId:this.templateId,templateName:this.templateName},
                responseType: "blob"
            }).then((res)=>{
                const link = document.createElement("a");
                let blob = new Blob([res], { type: "multipary/form-data" });
                link.style.display = "none";
                link.href = URL.createObjectURL(blob);
                link.setAttribute("download",this.templateName+'.xlsx');
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
            }).finally(() => {
                this.confirmLoading = false;
            })
        },
        ok(){
            if(!this.templateId ){
                this.$message.error("请指定导入数据模板");
                return false
            }
            if(!this.templateName){
                this.$message.error("请指定导入数据模板名称");
                return false
            }
            if(this.fileList.length==0){
                this.$message.error("请先选择导入的EXCEL文件");
                return false
            }
            const { fileList } = this;
            const formData = new FormData();
            formData.append('file', fileList[0]);
            formData.append('templateId',this.templateId);
            formData.append('imoprtParameter',JSON.stringify(this.imoprtParameter));
            this.confirmLoading = true;
            request({url: '/excel/ImportExcelControl/excelImport',method: 'post',data: formData}).then((res)=>{
                    if(res.success){   
                        this.$message.success(res.message);
                        this.$emit('handleOk');
                    }else{
                        this.$message.warning(res.message);
                    }
                }).finally(() => {
                    this.confirmLoading = false;
                    this.visible=false;
                })
            
        },
        cancel(){
            this.visible=false
            this.$emit('handleCancel');
        },
    }
}
</script>